<template>
  <!-- 地图 -->
  <div class="leaderMapPage">
    <div class="top">
      <div class="top-info" v-if="infoBoxShowFlag" @click="infoBoxGoGxMap">
        <div class="info-item" v-for="(n, i) in mapInfoDataArr" :key="i">
          <span class="item-title">{{ n.title }}：</span>
          <span class="item-cn">{{ n.content }} {{ n.unit }}</span>
        </div>
      </div>
      <Transition enter-active-class="animated zoomIn">
        <component
          class="top-map"
          :is="whichComponent"
          ref="mapComponentRef"
          @nextMap="changeMapComponent"></component>
      </Transition>
    </div>
    <div class="bottom">
      <div
        class="list-item"
        v-for="(n, i) in bottomListArr"
        :key="i"
        @click="showItemInfo(i)">
        <span
          class="item-pointBox"
          :style="{ backgroundColor: `${n.color}` }"></span>
        <span>{{ n.name }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, shallowRef, nextTick } from "vue";
import { changeNumToWan } from "../../utils/handelScreen";
// import Map3D from "./LeaderMap3D.vue";
import MapGaoxin from "./LeaderMapGaoxin.vue";
import BaseMap from "./LeaderMapBase.vue";
import { assetMapApi } from "@/api-dashboard/leaderApi";

const infoBoxShowFlag = ref(false)
// 底部
const bottomListArr = ref([
  {
    name: "农贸市场",
    color: "#0FF1F4",
  },
  {
    name: "商业(绿道)",
    color: "#1671C0",
  },
  {
    name: "商业(商铺)",
    color: "#C01616",
  },
  {
    name: "写字楼",
    color: "#C016BA",
  },
  {
    name: "综合体",
    color: "#0ABBFF",
  },
  {
    name: "其他",
    color: "#34C016",
  },
]);
const showItemInfo = (i) => {
  assetMapApi.zczh({ type: i + 1 }).then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let getDataObj = data.records[0];
      mapInfoDataArr.value[0].content = _.round(getDataObj.area, 2);
      mapInfoDataArr.value[1].content = changeNumToWan(getDataObj.value);
      mapInfoDataArr.value[2].content = getDataObj.number;
      mapInfoDataArr.value[3].content = changeNumToWan(getDataObj.expenditure);
      mapInfoDataArr.value[4].content = changeNumToWan(getDataObj.income);
    } else {
      mapInfoDataArr.value.map((n, i) => {
        n.content = 0;
      });
    }
  });
};

// 各类型地图组件
// 此名称必须与子组件中的ref值名称保持一致才能获取到子组件中的方法
let mapComponentRef = ref(null);
let whichComponent = shallowRef(MapGaoxin);
const mapInfoDataArr = ref([
  {
    title: "管理资产总面积",
    content: 0,
    unit: "㎡",
  },
  {
    title: "管理资产总价值",
    content: 0,
    unit: "万元",
  },
  {
    title: "管理资产总数量",
    content: 0,
    unit: "个",
  },
  {
    title: "管理资产总支出",
    content: 0,
    unit: "万元",
  },
  {
    title: "管理资产总收入",
    content: 0,
    unit: "万元",
  },
]);

// 切换地图
const changeMapComponent = (val, info) => {
  if (val === "GoGaoxinMap") {
    whichComponent.value = MapGaoxin;
    nextTick(() => {
      mapComponentRef.value.initGaoxinMap(mapUseData.value);
    });
  }
  if (val === "GoBaseMap") {
    whichComponent.value = BaseMap;
    nextTick(() => {
      mapComponentRef.value.initBaseMap(mapUseData.value, info);
    });
    infoBoxShowFlag.value = true
  }
  // if (val === "Go3DMap") {
  //   whichComponent.value = Map3D;
  //   nextTick(() => {
  //     mapComponentRef.value.init3DMap(mapUseData.value);
  //   });
  // }
  if (val === 'hideAmountInfoBox') {
    infoBoxShowFlag.value = false
  }
};

const infoBoxGoGxMap = () => {
  if (whichComponent.value === BaseMap) {
    whichComponent.value = MapGaoxin;
    nextTick(() => {
      mapComponentRef.value.initGaoxinMap(mapUseData.value);
    });
  }
};

// 传递给各子组件的数据
const mapUseData = ref([]);
// 父组件调用
const initLeaderMap = async () => {
  await assetMapApi.zc().then((res) => {
    const { httpStatusCode, data } = res;
    if (httpStatusCode == 200 && data.records?.length) {
      let dataArr = data.records;
      mapUseData.value = [
        {
          lng: "123",
          lat: "456",
          name: "烧烤带火锅",
        },
      ];
    }
  });
  // mapComponentRef.value.init3DMap(mapUseData.value);
  mapComponentRef.value.initGaoxinMap(mapUseData.value);
};

onMounted(() => {
  showItemInfo(0);
});
defineExpose({
  initLeaderMap,
});
</script>

<style lang="scss" scoped>
.leaderMapPage {
  height: 100%;
  padding: 0 15px;
  display: flex;
  flex-direction: column;
  .top {
    flex: 1;
    position: relative;
    .top-info {
      width: 226px;
      height: 108px;
      position: absolute;
      z-index: 2;
      right: 10px;
      top: 10px;
      padding: 10px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      background: url("@/assets/screenImg/commonImg/mapInfoBg.png") no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      .info-item {
        font-size: 12px;
        letter-spacing: 2px;
        .item-title {
          color: #d3e3ff;
        }
        .item-cn {
          color: #36e3e3;
        }
      }
    }
    .top-map {
      width: 100%;
      height: 100%;
    }
  }
  .bottom {
    height: 50px;
    line-height: 50px;
    padding-left: 30px;
    display: flex;
    .list-item {
      margin-right: 25px;
      cursor: pointer;
      span {
        display: inline-block;
        &:last-child {
          color: #d3e3ff;
          font-size: 12px;
        }
      }
      .item-pointBox {
        width: 7px;
        height: 7px;
        margin-right: 5px;
        border-radius: 50%;
      }
    }
  }
}
</style>
